<template>
  <div class="el-main main_el-main">
    <el-row class="missionDiv" :gutter="20">
      <el-col :span="18" class="mission">
        <div class="missionTitle">
          <span>我的任务</span>
          <div class="missionRight">
            <span class="addMission" @click="openAddMissionDialog"><i class="el-icon-plus"></i>新增任务</span>
            <span style="cursor: pointer" @click="$router.push('/user/projects/myMission/directed')">查看任务</span>
          </div>
        </div>
        <div class="missionDownDiv">
          <span class="titleSpan">已延时的任务</span>
          <div class="missionTitle">
            <div>
              <div class="card card-1" v-for="item in postponeMissions" @click="openMission(item.id)">
                <el-tag type="warning" class="cardTag" v-if="item.state == 1">{{item.status}}</el-tag>
                <el-tag type="danger" class="cardTag" v-if="item.state == 0">{{item.status}}</el-tag>
                <p>{{item.title}}</p>
                <p>{{item.type}}</p>
                <p style="color: red">{{item.overDate}}</p>
              </div>
            </div>
          </div>
          <span class="titleSpan">正在进行的任务</span>
          <div class="missionTitle">
            <div>
              <div class="card card-1" v-for="item in dongingMission" @click="openMission(item.id)">
                <el-tag type="warning" class="cardTag">{{item.status}}</el-tag>
                <p>{{item.title}}</p>
                <p>{{item.type}}</p>
                <p style="color: red">{{item.overDate}}</p>
              </div>
            </div>
            </div>
          </div>
      </el-col>
      <el-col :span="6">
        <div>
          <div style="width: 100%">
            <flip-clock></flip-clock>
            <div style="background-color: white;text-align: center;border-radius: 5px;" class="clearfix">
              <div style="float: left;width: 33%;">
                <p>工 时</p>
                <p style="font-size: 20px;">{{workTime}}</p>
              </div>
              <div style="float: left;width: 33%;border-left: 1px solid #9f9f9f;border-right: 1px solid #9f9f9f;">
                <p>任 务 数</p>
                <p style="font-size: 20px;">{{missionNumber}}</p>
              </div>
              <div style="float: left;width: 33%">
                <p>项 目 数</p>
                <p style="font-size: 20px;">{{projectNumber}}</p>
              </div>
            </div>
          </div>
          <hr>
          <div style="background-color: white; text-align: center" class="clearfix">
            <div style="float: left;width:50%;margin-top: 10px;">
              <el-progress type="dashboard" :percentage="missionComplete" :color="missionCompleteColors"></el-progress>
              <p>我的任务完成度</p>
            </div>
            <div style="float: left;width:50%;margin-top: 10px;">
              <el-progress type="dashboard" :percentage="missionUnComplete" :color="missionUnCompleteColors"></el-progress>
              <p>我的任务延期度</p>
            </div>
          </div>
            <div class="flip" v-for="item in Projects">
              <div class="front projectCard firstCard">
                <h1 class="text-shadow">{{item.project_name}} <span style="float: right">{{item.strStartDate}} - {{item.strOverDate}}</span></h1>
                <el-tag >{{item.state}}</el-tag>
                <span style="padding-left: 25px">{{item.principal_name}}</span>
                <p>项目完成率</p>
                <el-progress :percentage="item.finish" :color="customColor"></el-progress>
              </div>
              <div class="back projectCard firstCard">
                <p style="float: right;cursor: pointer;color:#fff" @click="$router.push('/user/projects/projectDetail/overview/'+ item.id)">查看更多<i class="el-icon-right"></i></p>
                <p>项目描述：{{item.description}}</p>
                <p style="float: right; width:200px;margin-top: 0;">状态描述：{{item.state_description}}</p>
              </div>
            </div>
          </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import FlipClock from "../../components/content/FilpClock"
  const axios = require('axios');
  export default {
    name: "Main",
    components:{
      FlipClock,
    },
    data() {
      return {
        workTime: 0,
        projectNumber: 0,
        missionNumber: 0,
        Projects:[],
        postponeMissions:[],
        dongingMission: [],
        missionComplete: 0,
        missionCompleteColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        missionUnComplete: 0,
        missionUnCompleteColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        customColor: '#409eff',
        customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ]
      };
      },
    created(){
      this.$axios.all([
        axios.post("/getMainPageResult",{"id":window.localStorage.getItem("id")}),
        axios.post("/getMyDoingMission",{"id":window.localStorage.getItem("id")}),
        axios.post("/getMyPostponeMission",{"id":window.localStorage.getItem("id")}),
      ]).then(this.$axios.spread((res1, res2, res3) => {
        this.dongingMission = res2.data;
        this.postponeMissions = res3.data;
        this.workTime = res1.data.hour;
        this.projectNumber = res1.data.projectnum;
        this.missionNumber = res1.data.missionnum;
        this.Projects = res1.data.projectPageList;
        this.missionComplete = res1.data.missionfinish;
        this.missionUnComplete = res1.data.missiondelay;
      }))
    },
    methods: {
      openAddMissionDialog(){
        this.$emit('openAddMissionDialog');
      },
      openMission(id) {
        this.$emit('openMission',id);
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/main.css";
  @import "../../assets/css/Card.scss";
</style>
